<template>
  <div class="box">
    <p>菜品罗列页面-添加菜品和下家菜品</p>
    <!-- from -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="菜品名称">
        <el-input
          v-model="formInline.food_name"
          placeholder="请输入菜品名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryFood">查询</el-button>
        <el-button type="primary" @click="resetFood">重置</el-button>
        <el-button type="primary" @click="addFood">新增菜品</el-button>
      </el-form-item>
    </el-form>
    <!-- table -->
    <el-table :data="nowTableData" border style="width: 100%">
      <el-table-column prop="id" align="center" label="菜品ID" width="180">
      </el-table-column>
      <el-table-column
        prop="food_name"
        align="center"
        label="菜品名称"
        width="180"
      >
      </el-table-column>
      <el-table-column align="center" label="使用状态" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.food_action"
            active-text="使用中"
            inactive-text="未使用"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="food_price"
        align="center"
        label="菜品价格"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="food_type"
        align="center"
        label="菜品类型"
        width="180"
      >
      </el-table-column>
      <el-table-column align="center" label="图片预览" width="100">
        <template slot-scope="scope">
          <img :src="host + scope.row.food_img" alt="加载失败" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="180">
        <template slot-scope="scope">
          <span @click="modifyFood(scope.row)" class="operation">修改菜品</span>
          <span @click="deleteFood(scope.row)" class="operation">删除菜品</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        layout="prev, pager, next"
        :page-size="pageSize"
        :page-count="pageNum"
        :total="pagetotal"
        @current-change="nowPageNum"
      >
      </el-pagination>
    </div>

    <!-- 新增 -->
    <el-dialog
      title="添加菜品"
      @close="emptyForm"
      :destroy-on-close="true"
      :visible.sync="addFoodFormVisible"
    >
      <el-form :model="form">
        <el-form-item label="菜品名称" label-width="100px">
          <el-input v-model="form.food_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品类型" label-width="100px">
          <el-input v-model="form.food_type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品价格" label-width="100px">
          <el-input v-model="form.food_price" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="菜品图片" label-width="100px">
          <el-upload
            class="avatar-uploader"
            action
            :http-request="clickUpload"
            list-type="picture-card"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addFoodFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVegetables">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="修改菜品"
      @close="emptyForm"
      :destroy-on-close="true"
      :visible.sync="editFoodFormVisible"
    >
      <el-form :model="form">
        <el-form-item label="菜品名称" label-width="100px">
          <el-input v-model="form.food_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品类型" label-width="100px">
          <el-input v-model="form.food_type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品价格" label-width="100px">
          <el-input v-model="form.food_price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="使用状态" label-width="100px">
          <el-input v-model="form.food_action" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editFoodFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editVegetables">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let formData = new FormData();
export default {
  data() {
    return {
      pagetotal: 1,
      pageSize: 5,
      pageNum: Math.ceil(this.pagetotal / this.pageSize),
      nowPage: 1,
      host: "http://124.220.177.66:8081/",
      formInline: {
        food_name: "",
      },
      tableData: [],
      state: true,
      addFoodFormVisible: false,
      editFoodFormVisible: false,
      form: {
        id: "",
        food_name: "",
        food_type: "",
        food_price: "",
        food_action: "",
      },
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  computed: {
    nowTableData() {
      let stsrt = (this.nowPage - 1) * this.pageSize;
      let end = stsrt + this.pageSize;
      return this.tableData.slice(stsrt, end);
    },
  },
  methods: {
    messagePrompt(str, result) {
      this.$message({
        showClose: true,
        message: str,
        type: result,
      });
    },
    getFood() {
      this.$food.getFoodData().then((data) => {
        this.pagetotal = data.data.data.length;
        this.tableData = data.data.data;
        // console.log(data.data);
      });
    },
    // 添加--弹出框显示
    addFood() {
      this.addFoodFormVisible = true;
    },
    // 文件选择执行
    clickUpload(count) {
      // console.log(count.file);
      formData.append("uploadImg", count.file);
    },
    // 添加确定
    addVegetables() {
      formData.append("food_name", this.form.food_name);
      formData.append("food_type", this.form.food_type);
      formData.append("food_price", this.form.food_price);
      console.log(this.form);
      this.$food.addFoodVegetables(formData).then((data) => {
        console.log(data.data);
        if (data.data.code == 200) {
          this.messagePrompt("添加成功", "success");
          this.emptyForm();
          this.addFoodFormVisible = false;
          this.getFood();
        } else {
          this.addFoodFormVisible = false;
          this.messagePrompt("添加失败", "error");
          this.emptyForm();
        }
      });
    },
    // 查询
    queryFood() {
      console.log(22);
      console.log(this.formInline.food_name);
      // this.$food.queryFoodVegetables(this.formInline.food_name).then((data) => {
      //   console.log(data.data);
      // });
    },
    // 删除
    deleteFood(value) {
      console.log(value.id);
      this.$confirm("确定删除该菜品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$food.deleteFoodVegetables(value.id).then((data) => {
            console.log(data.data);
            if (data.data.code == 200) {
              this.getFood();
              this.messagePrompt("删除成功", "success");
            } else {
              this.messagePrompt("删除成功", "error");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 修改
    modifyFood(value) {
      console.log(value);
      this.editFoodFormVisible = true;
      this.form.id = value.id;
      this.form.food_name = value.food_name;
      this.form.food_type = value.food_type;
      this.form.food_price = value.food_price;
      this.form.food_action = value.food_action;
    },
    // 修改确定
    editVegetables() {
      this.editFoodFormVisible = false;
      console.log(this.form);
      let obj = {
        id: this.form.id,
        food_name: this.form.food_name,
        food_type: this.form.food_type,
        food_price: this.form.food_price,
        food_action: this.form.food_action,
      };
      this.$food.editFoodVegetables(obj).then((data) => {
        console.log(data.data);
        if (data.data.code == 200) {
          this.getFood();
          this.emptyForm();
          this.messagePrompt("修改成功", "success");
        } else {
          this.emptyForm();
          this.messagePrompt("修改成功", "error");
        }
      });
    },
    nowPageNum(value) {
      this.nowPage = value;
      console.log(value);
    },
    // 重置
    resetFood() {
      sessionStorage.this.formInline = {
        food_name: "",
      };
      this.getFood();
    },
    // 清空
    emptyForm() {
      this.form = {
        id: "",
        food_name: "",
        food_type: "",
        food_price: "",
      };
    },
  },
  created() {
    this.getFood();
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.box {
  text-align: left;
  /deep/table {
    td {
      font-size: 12px;
    }
    img {
      width: 50px;
    }
  }
}
.operation {
  color: rgb(65, 122, 255);
  cursor: pointer;
  margin: 0 10px;
}
.operation:hover {
  color: blue;
}

.paging {
  text-align: center;
}
/deep/.el-dialog {
  width: 40%;
}
/deep/ .el-dialog__body {
  padding: 30px 20px 0;
}
/deep/.el-upload {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
</style>
